<template>
    <div class="order_part">
         
    <!-- 搜索组件 -->
        <SearchbOrder :plh_a="placeholdera" :plh_b="placeholderb" :plh_c="placeholderc"></SearchbOrder>
        <!-- 表格 -->
        <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        >
            <el-table-column align="center" type="selection" width="55"> </el-table-column>
            <el-table-column align="center" prop="tag_code" label="终端编号" width="150px" sortable></el-table-column>
            <el-table-column align="center" prop="order_code" label="订单编号"  width="150px" sortable> </el-table-column>
            <el-table-column align="center" prop="deal" label="交易编号" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column align="center" prop="pay" label="支付方式"  sortable> </el-table-column>
            <el-table-column align="center" prop="dealType" label="交易类型"  sortable> </el-table-column>
            <el-table-column align="center" prop="price" label="商品价格"  sortable> </el-table-column>
            <el-table-column align="center" prop="money" label="支付金额"  sortable> </el-table-column>
            <el-table-column align="center" prop="name" label="商品名称"  sortable> </el-table-column> 
            <el-table-column align="center" prop="state" label="订单状态"  sortable> </el-table-column>
            <el-table-column align="center" prop="time" label="创建时间" width="200px" sortable> </el-table-column>
            <el-table-column align="center" label="操作" width="200px" >
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">预览</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <Pagination :num="lists.length" router="/order/order/"></Pagination>
        <Preview :list="list"></Preview>
 

    </div>
</template>


<script>
import Pagination from "@c/Pagination";
import SearchbOrder from "@c/Searchb-order";
import Preview from '@c/Preview'
export default {
  components: { SearchbOrder, Pagination, Preview },
    data() {
        return {
            placeholdera: '请输入终端编号',
            placeholderb: '请输入订单号',
            placeholderc: '请输入订单交易号',
            title: '交易订单',
            tableData: [],
            // 预览
            dialogVisible: false,
            list: {},
            // 数据总数
            lists: [],
        }
    },
    created() {
        this.$store.commit('title', this.title);
        // 预览
        this.$store.commit('dialogVisible', this.dialogVisible)
        this.getData()
        this.getDatas()
    },
    methods: {
        // 请求数据方法
        getData() {
            let params = this.$route.params;
            this.$http.get('/order', { params })
                .then(({ data }) => {
                   if(!data.errno) {
                       this.tableData = data.data
                   }
                })
            
        },
        getDatas() {
            this.$http.get('/orders')
                .then(({ data }) => {
                   if(!data.errno) {
                       this.lists = data.data
                   }
                })
            
        },

        // 选择项发生变化
        handleSelectionChange() {

        },
        // 预览
        handleEdit(index, data) {
            this.$store.state.dialogVisible = true;
            this.list = data
        },
        // 删除
        handleDelete(index, data) {
            this.$confirm('确定要删除吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.get('/order/delete', { params: {_id: data._id}})
                    .then(({ data }) => {
                        if(!data.errno) {
                           
                            this.$message({
                                message: data.msg,
                                type: 'success'
                            })
                            setTimeout(() => {
                                this.$router.go(0)
                            },1000)
                        }
                    })
                }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                    });

        }

    },
    watch: {
        $route() {
            this.getData()
        }
    }

    
    
}
</script>